<template>
	<view>
		<view class="container">
			<view class="banner">
				<u-swiper :list="info.thumbs" keyName="preview_url" :height="300"></u-swiper>
			</view>
			<view class="desc margin-top">
				<view class="desc-content bg-f5f5f7 padding radius-xl">
					<view class="top">
						<view class="name">
							<text class="text-xl text-bold text-black">{{ info.title }}</text>
							<view class="cu-tag bg-white sm round margin-left" @click="collect(info)">
								<text class="padding-right-mn text-red"
									:class="info.is_collect ? 'cuIcon-likefill' : 'cuIcon-like'"></text>
									{{ info.collect_num }}
							</view>
							<view class="cu-tag bg-white sm round margin-left themeColor">
								<text class="padding-right-mn cuIcon-favorfill"></text> {{ info.comment_grade }}
							</view>
						</view>
					</view>
					<view class="center text-sm text-gray">
						<text>旗下技师({{ info.people_num }})人</text>
						<view class="" v-if="info.distance_text">
							<text class="cuIcon-location padding-right-mn"></text>
							<text class="text-black">{{ info.distance_text }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex text-center">
				<view class="padding" :class="navTbale == index ? 'active' : ''" v-for="(item, index) in navList"
					:key="index" @click="changeNavTab(index)">
					{{ item }}
				</view>
			</view>
		</view>

		<view class="padding">
			<view v-show="navTbale === 0">
				<template v-if="technician.length > 0">
					<technician-item v-for="(item, index) in technician" :key="index" :item="item"
						class="margin-bottom-sm" />
				</template>
				<view class="flex flex-direction justify-center" v-else>
					<emptyData type="notData" text="暂无技师"></emptyData>
				</view>
			</view>

			<!-- 技师介绍 -->
			<view v-show="navTbale === 1">
				<view class="padding">
					<view class="margin-bottom-sm">门店位置</view>
					<view class="padding-top-sm text-bold">
						{{ info.province }} {{ info.city }} {{ info.area }}
						{{ info.street }} {{ info.address }}
					</view>
				</view>
				<view class="padding">
					<view class="margin-bottom-sm">联系电话</view>
					<view class="padding-top-sm text-bold" v-for="tel in info.tel" :key="tel" @tap="$utils.makePhoneCall(tel)">
						{{ tel }}</view>
				</view>
				<view class="padding">
					<view class="margin-bottom-sm">负责人</view>
					<view class="padding-top-sm text-bold" @tap="$utils.makePhoneCall(info.mobile)">{{ info.name
						}} · {{ info.mobile
						}}</view>
				</view>
			</view>

			<!-- 门店评价 -->
			<Comment :list="info.comments" :show="navTbale == 2 ? true : false" />
		</view>

		<loading v-if="pageLoading" />
	</view>
</template>

<script>
import Comment from './modules/comment';
import technicianItem from '@/pages/technician/modules/item';
export default {
	components: { Comment, technicianItem },
	data() {
		return {
			pageLoading: false,
			navTbale: 0,
			navList: ['技师', '门店', '评价'],
			info: {},
			technician: [],
			search: {
				shop_id: 0,
				limit: 10,
				page: 1
			}
		};
	},
	onLoad(options) {
		this.getInfo(options.id);
	},
	onReachBottom() {
		if (this.navTbale !== 0) return;
		this.search.page++;
		this.getTechnician();
	},
	methods: {
		getInfo(id) {
			this.pageLoading = true;
			this.$utils.$api.Shop.details(id).then(data => {
				this.info = data;
				this.search.shop_id = data.id;
				this.getTechnician();
			})
				.catch(err => {
					uni.showModal({
						title: '提示',
						content: err.msg,
						showCancel: false,
						success: () => {
							this.$utils.$page.back();
						}
					})
					console.log(err);
				})
				.finally(() => {
					this.pageLoading = false;
				})
		},
		getTechnician() {
			this.$utils.$api.Technician.list(this.search).then(data => {
				this.technician = [...this.technician, ...data.data];
			}).finally(() => {
			});
		},
		changeNavTab(index) {
			this.navTbale = index;
		},
		collect(item) {
			this.$utils.$api.Collect.shop(item.id).then((data) => {
				item.is_collect = data.state;
				if (data.state) {
					item.collect_num++;
				} else {
					item.collect_num--;
				}
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			})
		}
	}
}
</script>

<style lang="less" scoped>
.container {
	background-color: #FFFFFF;

	.banner {
		border-bottom-left-radius: 55upx;
		border-bottom-right-radius: 55upx;
		overflow: hidden;
	}

	.active {
		color: black;
		font-weight: bold;
	}

	.desc {

		.auth {
			border-top-left-radius: 15upx;
			border-top-right-radius: 15upx;
			width: 85%;
			margin: auto;
			background-color: #e0fbf3;
		}

		.desc-content {
			width: 93%;
			margin: auto;
			line-height: 45upx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.center {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}
</style>
